<template>
  <div v-loading.lock="loading"
    class="base-view">
    <el-descriptions title="基础信息"
      direction="vertical"
      :column="7"
      border>
      <el-descriptions-item label="盘点单编号">{{ formData.checkNum }}</el-descriptions-item>
      <el-descriptions-item label="盘点仓库">{{ formData.storageName }}</el-descriptions-item>
      <el-descriptions-item label="库区范围"
        :span="2">{{ formData.storageAreaRangeName }}</el-descriptions-item>
      <el-descriptions-item label="盘点负责人">{{ formData.operatorName }}</el-descriptions-item>
      <el-descriptions-item label="盘点开始时间">{{ formData.startTime }}</el-descriptions-item>
      <el-descriptions-item label="盘点结束时间">{{ formData.endTime }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ formData.remark }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="盘点结果"
      class="labelClassName">
      <template slot="extra">
        <el-checkbox v-model="checked"
          @change="filterResult">只显示盘点差异数据</el-checkbox>
      </template>
    </el-descriptions>
    <el-table ref="tableResult"
      :data="filterFormResult.slice((pagination.pageIndex - 1) * pagination.pageSize, pagination.pageIndex * pagination.pageSize)"
      highlight-current-row>
      <el-table-column label="库区">
        <template slot-scope="scope">{{ scope.row.storageAreaName }}</template>
      </el-table-column>
      <el-table-column label="证书编号">
        <template slot-scope="scope">{{ scope.row.certificateNum }}</template>
      </el-table-column>
      <el-table-column label="物料编号">
        <template slot-scope="scope">{{ scope.row.productNum }}</template>
      </el-table-column>
      <el-table-column label="物料名称">
        <template slot-scope="scope">{{ scope.row.productName }}</template>
      </el-table-column>
      <el-table-column label="分类">
        <template slot-scope="scope">{{ scope.row.typeName }}</template>
      </el-table-column>

      <el-table-column label="型号规格">
        <template slot-scope="scope">
          {{ scope.row.size }}
        </template>
      </el-table-column>
      <el-table-column label="包装单位">
        <template slot-scope="scope">
          {{ scope.row.packingUnit }}
        </template>
      </el-table-column>
      <el-table-column label="存储条件">
        <template slot-scope="scope">
          {{ scope.row.storeCondition }}
        </template>
      </el-table-column>
      <el-table-column label="实际库存">
        <template slot-scope="scope">
          {{ scope.row.actualStock }}
        </template>
      </el-table-column>
      <el-table-column label="盘点库存">
        <template slot-scope="scope">
          {{ scope.row.checkStock }}
        </template>
      </el-table-column>
      <el-table-column label="差异库存">
        <template slot-scope="scope">
          <span :class="scope.row.differenceStock >= 0 ? 'red' : 'green'">{{
            scope.row.differenceStock > 0
            ? '+' + scope.row.differenceStock
            : scope.row.differenceStock
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <BasePagination :total="pagination.total"
      :current-page="pagination.pageIndex"
      :page-count="pagination.total"
      @changePage="changePage"
      @sizeChange="sizeChange" />
    <el-descriptions title="盘点备注"
      class="labelClassName"> </el-descriptions>
    <el-input v-model="formData.checkRemark"
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 4 }"
      placeholder="请输入备注">
    </el-input>
  </div>
</template>

<script>
import { get, innerPass, innerReject } from "./api/MaterialManage/InventoryCheck.js";

export default {
  name: "AuditMaterialInventoryCheckDialog",
  components: {},
  props: {
    editId: {
      type: String,
      default: '0',
    }
  },
  data() {
    return {
      loading: false,
      checked: true,
      formData: {},
      formResult: [],
      filterFormResult: [],
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      }
    };
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    innerPass(obj) {
      innerPass(obj)
        .then((res) => {
          this.$emit("passOrNoPassEmit");
        })
        .catch();
    },
    innerReject(obj) {
      innerReject(obj)
        .then((res) => {
          this.$emit("passOrNoPassEmit");
        })
        .catch();
    },
    innerWithdraw(obj) {
      obj.auditStatus = 60;
      innerReject(obj)
        .then((res) => {
          this.$emit("passOrNoPassEmit");
        })
        .catch();
    },
    changePage(val) {
      this.pagination.pageIndex = val;
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
    },
    filterResult() {
      this.pagination.pageIndex = 1;
      if (this.checked) {
        this.filterFormResult = this.formResult.filter((item) => {
          return item.differenceStock !== 0
        })
      } else {
        this.filterFormResult = this.formResult;
      }

      this.pagination.total = this.filterFormResult.length;
    },
    cancel() {
      this.$emit("update:dialogFormVisible", false);
    },
    closeDialog() {
      this.cancel();
    },
    init() {
      get({ id: this.editId }).then(res => {
        this.formData = res.data;
        this.formResult = res.data.inventoryCheckDetailsList;
        this.filterResult()
      }).catch(res => { })
    },
  },
};
</script>
<style  lang="scss" >
.base-view {
  display: flex;
  flex-direction: column;

  .red {
    color: red;
  }

  .green {
    color: green;
  }

  .btn {
    margin-left: 10px;
  }

  .labelClassName {
    padding-top: 10px;

    .el-descriptions__header {
      justify-content: left !important;

      .el-descriptions__extra {
        padding-left: 10px !important;
      }
    }
  }
}
</style>
